<!doctype html>
<html class="no-js">
<head>
  <include file="./Apps/WebApp/View/default/common_meta.html" />
  <title>个人信息 - {$CONF['mallTitle']}</title>
  <meta name="keywords" content="{$CONF['mallKeywords']},个人信息" />
  <meta name="description" content="{$CONF['mallDesc']},个人信息" />
  <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/common.css?v={$WST_V}">
  <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/userinfo.css?v={$WST_V}">
</head>
<body>
  <header class="wst-nav not-upload">
    <div class="am-g">
      <div class="am-u-sm-2">
        <a href="{:U('WebApp/Users/index')}" class="wst-header-left"><i class="am-icon-angle-left am-icon-sm"></i></a>
      </div>
      <div class="am-u-sm-8 wst-nav-center">
        <span class="wst-header-center">个人信息</span>
      </div>
      <div class="am-u-sm-2">&nbsp;</div>
    </div>
  </header> 

  <header data-am-widget="header" class="am-header am-header-default am-header-fixed wst-inner-page-nav" id="clip" style="display:none;">
    <div class="am-header-left am-header-nav" onclick="closeUploadArea();">关闭</div>
    <div class="am-header-right am-header-nav" id="clipBtn">上传</div>
  </header>
    
  <div class="userinfo-container not-upload">
    <div class="am-g userinfo-row first-userinfo-row">
      <div class="am-u-sm-4" style="margin-top:20px;">头像</div>
      <div class="am-u-sm-8 options-right">
      <?php if($user['userPhoto'] != ''){ ?>
        <img src="__ROOT__/{$user['userPhoto']}" class="user-photo" id="addImg">
      <?php }else{ ?>
        <img src="__ROOT__/Apps/WebApp/View/default/images/user_photo.png" id="addImg"  class="user-photo">
      <?php } ?>
        <i class="am-icon-angle-right am-icon-sm"></i>
        <input type="file" id="uploadImg" class="uploadfile-input userinfo" accept="image/*">
      </div>
    </div>
    <div class="am-g userinfo-row first-userinfo-row">
      <div class="am-u-sm-4">用户名</div>
      <div class="am-u-sm-8 options-right"><span class="userinfo">{$user['loginName']}</span></div>
    </div>
    <div class="am-g userinfo-row nickName-area" id="nickName" onclick="javascript:openNickName();">
      <div class="am-u-sm-4">昵称</div>
      <div class="am-u-sm-8 options-right"><span class="userinfo" id="nickname">{$user['userName']}</span><i class="am-icon-angle-right am-icon-sm"></i>
      </div>
    </div>
    <div class="am-g userinfo-row userSex-area" id="userSex" onclick="javascript:openUserSex();">
      <div class="am-u-sm-4">性别</div>
      <div class="am-u-sm-8 options-right">
        <?php $usersex = array('保密','男','女');?>
        <span class="userinfo" id="usersex"><?php echo $usersex[$user['userSex']];?></span>
        <i class="am-icon-angle-right am-icon-sm"></i>
      </div>
    </div>
    <a href="{:U('WebApp/Users/toBindPhone')}" class="alink">
      <div class="am-g userinfo-row">
        <div class="am-u-sm-4">手机</div>
        <div class="am-u-sm-8 options-right">
          <?php if( $user['userPhone'] != ''){ ?>
            <span class="userinfo"><?php echo $user['userPhone'];?></span>
          <?php }else{ ?>
            <span>未绑定</span>
          <?php } ?>
          <i class="am-icon-angle-right am-icon-sm"></i>
        </div>
      </div>
    </a>
    <a href="{:U('WebApp/Users/toBindEmail')}" class="alink">
      <div class="am-g userinfo-row">
        <div class="am-u-sm-4">邮箱</div>
        <div class="am-u-sm-8 options-right">
          <?php if( $user['userEmail'] != ''){ ?>
            <span class="userinfo"><?php echo $user['userEmail'];?></span>
          <?php }else{ ?>
            <span>未绑定</span>
          <?php } ?>
          <i class="am-icon-angle-right am-icon-sm"></i>
        </div>
      </div>
    </a>
  </div>
  <div class="am-popup" id="wst-nickname-popup">
    <div class="am-popup-inner">
      <div class="am-popup-hd">
        <header data-am-widget="header" class="am-header am-header-default am-header-fixed" style="background-color:#F36C2C;">
          <div class="am-header-left am-header-nav"><i class="am-icon-angle-left am-icon-sm close-nickName"  onclick="javascript:closeNickName();"></i></div>
          <h1 class="am-header-title">修改昵称</h1>
          <div class="am-header-right am-header-nav editNickName" id="editNickName" onclick="javascript:editNickName();">确定</div>
        </header>
      </div>
      <div class="am-popup-bd">
        <input type="text" class="am-form-field am-radius" name="userName" id="userName" placeholder="昵称" autocomplete="off">
      </div>
    </div>
  </div>
  <div class="am-popup" id="wst-usersex-popup">
    <div class="am-popup-inner">
      <div class="am-popup-hd">
        <header data-am-widget="header" class="am-header am-header-default am-header-fixed" style="background-color:#F36C2C;">
          <div class="am-header-left am-header-nav"><i class="am-icon-angle-left am-icon-sm close-usersex" onclick="javascript:closeUserSex();"></i></div>
          <h1 class="am-header-title">修改性别</h1>
        </header>
      </div>
      <div class="am-popup-bd">
        <div class="usersex" onclick="javascript:eidtUserSex(this, 0);">保密 
          <span class="usersex-check-area">
            <?php if($user['userSex']==0){ ?>
              <i class="am-icon-check usersex-check"></i>
            <?php } ?>
          </span>
        </div>
        <div class="usersex" onclick="javascript:eidtUserSex(this, 1);">男 
          <span class="usersex-check-area">
            <?php if($user['userSex']==1){ ?>
              <i class="am-icon-check usersex-check"></i>
            <?php } ?>
          </span>
        </div>
        <div class="usersex" onclick="javascript:eidtUserSex(this, 2);">女 
          <span class="usersex-check-area">
            <?php if($user['userSex']==2){ ?>
              <i class="am-icon-check usersex-check"></i>
            <?php } ?>
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="upload-modal" id="upload_modal">
      <div id="clipArea" class="clipArea"></div>
      <input type="hidden" id="imgData" autocomplete="off">
  </div>
  
  <div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="wst-default-loading">
    <div class="am-modal-dialog">
      <div class="am-modal-hd">Loading...</div>
      <div class="am-modal-bd">
        <span class="am-icon-spinner am-icon-spin"></span>
      </div>
    </div>
  </div>

  <include file="./Apps/WebApp/View/default/common_footer.html" />   
  <include file="./Apps/WebApp/View/default/common_js.html" /> 
  <script src="__ROOT__/Apps/WebApp/View/default/Photoclip/iscroll-zoom.js"></script>
  <script src="__ROOT__/Apps/WebApp/View/default/Photoclip/hammer.js"></script>
  <script src="__ROOT__/Apps/WebApp/View/default/Photoclip/jquery.photoClip.js"></script>
  <script src="__ROOT__/Apps/WebApp/View/default/js/userinfo.js?v={$WST_V}"></script>
  <script>
    //关闭图片上传区
    function closeUploadArea(){
        $('.not-upload').show();
        $('#upload_modal').hide();
        $('#clip').hide();
        //清空图片上传区的内容
        $('#clipArea').find('img').remove();
        $('#file').val('');
        $('#view').css('background-image','');
        $('#imgData').val('');
    }

    $(document).ready(function(){
      $('#uploadImg').on('change', function() {
        $('.not-upload').hide();
        $('#clip').show();
        $('#upload_modal').show();
      });

      //图片上传
      $("#clipArea").photoClip({
          width: 350,
          height: 350,
          file: "#uploadImg",
          view: "#view",
          ok: "#clipBtn",
          loadStart: function() {
              $("#wst-default-loading").modal();
          },
          loadComplete: function() {
            $("#wst-default-loading").modal('close');
          },
          clipFinish: function(dataURL) {
              $('#imgData').val(dataURL);

              var imgData = $('#imgData').val();
              if(!imgData || imgData==''){
                  wstMsg('请先选择图片');
                  return false;
              }
              $("#wst-default-loading").modal();
              $.post(Think.U('WebApp/Users/uploadUserPhoto'), {'imgData': imgData}, function(data){
                  var json = WST.toJson(data);
                  if(json.status==1){
                    $.post(WST.U('WebApp/Users/editUserInfo'), {userPhoto:json.filepath}, function(data){
                      if(json.status==1){
                        wstMsg('修改头像成功');
                        $('#addImg').attr('src', WST.ROOT +'/'+json.filepath);
                      }else{
                        wstMsg('修改头像失败，请重试');
                        return false;
                      }
                      closeUploadArea();
                    });
                  }else{
                    wstMsg(json.msg);
                  }
                  $("#wst-default-loading").modal('close');
              });
          }
      });
    });
  </script>
</body>
</html>